FlyTalk.views.MapTab = Ext.extend(Ext.Panel, {
	//fullscreen: true,
	title: 'Map',
	layout: 'vbox',
	bodyStyle: 'background-image: url(./images/background.png); width: 100%; height: 100%; position: absolute; top: 0; left: 0',
	//pack: 'center',
	

		
    initComponent: function () {
    		
// tool bar section
        this.backButton = new Ext.Button({
		
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
        
        this.filterButton = new Ext.Button({
        	iconMask: true, 
        	ui: 'plain', 
        	iconCls: 'add',
			handler: this.filterButtonTap,
			scope: this
		});
        
		this.toolbar = new Ext.Toolbar({
				title: 'Itin/Map',
				doc: 'top',
				layout: 'hbox',
				hidden: 'true',
				items: [
					this.backButton,
					{xtype: 'spacer'},
					this.filterButton,
				]
		});
		
		this.dockedItems = [this.toolbar];
		
// filter menu
		// template for menu button
		var menuButtonTpl = new Ext.XTemplate(
			'<div style="padding:6px"><img src={src} alt="" width="60" height="60" /><p style="font-size:12px">{btnText}</p></div>'
		);
				
		//restaurant filter
		this.filterButton1 = new Ext.Button({
			data:{
				src: "images/filter_rest_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		//shopping
		this.filterButton2 = new Ext.Button({
			data:{
				src: "images/filter_shop_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton2Tap,
			scope: this
		});
		
		// rental car
		this.filterButton3 = new Ext.Button({
			data:{
				src: "images/filter_other_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton3Tap,
			scope: this
		});
		
		// wifi
		this.filterButton4 = new Ext.Button({
			data:{
				src: "images/filter_wifi_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton4Tap,
			scope: this
		});
		
		//outlet
		this.filterButton5 = new Ext.Button({
			data:{
				src: "images/filter_outlet_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton5Tap,
			scope: this
		});
		
		//Loos
		this.filterButton6 = new Ext.Button({
			data:{
				src: "images/filter_museum_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton6Tap,
			scope: this
		});
		
		// atm
		this.filterButton7 = new Ext.Button({
			data:{
				src: "images/filter_atm_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton7Tap,
			scope: this
		});
		
		// user
		this.filterButton8 = new Ext.Button({
			data:{
				src: "images/filter_wc_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton8Tap,
			scope: this
		});
		
		// map
		this.filterButton9 = new Ext.Button({
			data:{
				src: "images/filter_user_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'unclicked',
			flex:1,
			handler: this.filterButton9Tap,
			scope: this
		});
		
		
		// top row for overlay menu
		this.firstPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
		//	html: 'top',
			//flex:1,
			layout: 'hbox',
			items: [this.filterButton1, this.filterButton2, this.filterButton3],
		});
		
		// 2nd row for overlay menu
		this.secondPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
			//flex:1,
			//html: 'mid',
			layout: 'hbox',
		    items: [this.filterButton4, this.filterButton5, this.filterButton6],
		});
		

		// 3rd row for overlay menu
		this.thirdPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
			//flex:1,
			//html: 'mid',
			layout: 'hbox',
		    items: [this.filterButton7, this.filterButton8, this.filterButton9],
		});
		
		this.overlayTb = new Ext.Toolbar({
            dock: 'top',
            title: 'Map Filters',
        });
		
		this.overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
			layout:'fit',
			//width: 200,
            //height: 180,
		    hideMode:'close',
		    hideOnMaskTap:'false',
		    layout: 'vbox',
		    scroll:'vertical',
			items: [
			        this.firstPanel,
			        this.secondPanel,
			        this.thirdPanel,
			        {
			        	xtype: 'button',
			        	text: 'add new point of interest',
			        	
			        }
             ], // end of items
           //  dockedItems: [this.overlayTb],
        });


		var mapButtonTpl = new Ext.XTemplate(
				'<img src={src} alt="" />',
				'<p style="font-size:small">{btnText}</p>'
			);
		
						
			
	this.BodyPanel = new Ext.Panel({
			 fullscreen: true,
            height:420,
            width:380,
          html: '<div id="mapper"></div>'
           //html: 'and now?',
         // items: [this.zoomPanel]
	
		});
		
	var discloseButtonTpl = new Ext.XTemplate(
			'<img src={src} alt="" height="80" width="50"/>'
	);
	
	this.disclose = new Ext.Button({
//		data:{
//			src: "images/arrowInBubble.png",
//		},
		html: '<img src="images/arrowInBubble.png" height="50" width="50">',
		baseCls: "menuButton",
		pressedCls: "menuButtonPressed",
		//pack: 'right',
//		tpl:discloseButtonTpl,
		handler: function(){
		//	alert("clicked");
			Ext.get('detailImage').update('<div><img id="tp" src="./images/security.png"></img></div>');
			FlyTalk.views.ItinDetailView.toolbar.setTitle("security");
			
			Ext.dispatch({
	            controller: FlyTalk.controllers.ftController,
	            action: 'openItinDetail'
	        });
		},
		scope: this
	});
	
	this.ItinPanel = new Ext.Panel({
		//	layout:'fit',
		width: 280,
		layout: 'hbox',
        items:[
            {
            	html: '<img width=40px height=40px src="./images/icosecurity.png">',
            	width: 50,
            },{
            	html: '<h1 class="maplist-detail-large">Security</h1><p class="maplist-detail-small">Walk time: 3 min (estimated)</p><p class="maplist-detail-small">Wait time: 17 min (estimated)</p>',
            	width: 190,
            },
		    this.disclose
		]
	});
	
		
// restaurant view
		
		this.restMap1 = new Ext.Button({
			data:{
				src: "images/schipol1.png",
//				src: "images/filter_map_outlet1.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="99"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			//handler: this.tapImage1,
			scope: this
		});
		
		this.restMap2 = new Ext.Button({
			data:{
				src: "images/schipol2.png",
//				src: "images/filter_map_outlet2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			//handler: this.tapImage2,
			scope: this
		});
		
		this.restMap3 = new Ext.Button({
			data:{
				src: "images/schipol3.png",
//				src: "images/filter_map_outlet3.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
		//	handler: this.tapImage3,
			scope: this
		});
		
		this.overlayImage1 = new Ext.BoxComponent({
            floating: true,
            modal: true,
			centered: true,
            layout:'fit',
            // pack: 'center',
			 hideMode:'close',
		     html: '<img id="burgerking" src="./images/BurgerKingBubble.png" ></img>',
		     });
		
		
		this.overlayImage2 = new Ext.BoxComponent({
            floating: true,
            modal: true,
            centered: true,
         	layout:'fit',
			 hideMode:'close',
			// pack: 'center',
		     html: '<img id="burgerking" src="./images/CafeRembrandtBubble.png" ></img>',
		     });
		
		this.overlayImage3 = new Ext.BoxComponent({
            floating: true,
            modal: true,
            centered: true,
          	layout:'fit',
          	//pack: 'center',
			hideMode:'close',
		    html: '<img id="burgerking" src="./images/HelloThereBubble.png" ></img>',
		     });
		
		this.RestPanel = new Ext.Panel({
			//autoLoad: true,
			scroll: true,
          //  fullscreen: true,
			height: 274,
			width: 320,
			hidden: true,
            layout: 'hbox',
          // align: 'stretch',
			//flex:1,
			items: [this.restMap1, this.restMap2, this.restMap3],
		});
		
		this.filterMap = new Ext.Button({
			data:{
				src: "images/filter_map_outlet.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			handler: this.tapImage3,
			scope: this
		});
		
		this.selectedServicePanel = new Ext.Panel({
			//autoLoad: true,
			scroll: true,
          //  fullscreen: true,
			height: 275,
			hidden: true,
            layout: 'hbox',
          // align: 'stretch',
			//flex:1,
			items: [this.filterMap],
		});
		
		this.items= [
		             //{html: '<div ><h1 class="tp-heading-large">checkin</h1> <p class="tp-heading-small">Flight TAP001</p> <p class="tp-heading-small">Wait time approximately 5 minutes</p></div>',
		     			//},
		             //{xtype:'zoomPanel', html: '<div id="mapper"></div>'},
		             this.ItinPanel,
		          this.BodyPanel,
				this.RestPanel,
					// this.overlayImage1,
					// this.overlayImage2,
					// this.overlayImage3,
					 //this.selectedServicePanel,
		             ];
			
		FlyTalk.views.MapTab.superclass.initComponent.call(this);
		 
    },
    
    backButtonTap: function () {
    	this.RestPanel.hide();
		this.BodyPanel.show();
		this.BodyPanel.doComponentLayout();
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },     
            
    filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	this.overlay.show();
    },
        
	filterButton1Tap: function () { // to open the image overlay 
		if(this.filterButton1.title == "unclicked"){
			this.filterButton1.update({src: "images/filter_rest_off.png"});
			this.filterButton1.title = "clicked";
			this.filterButton1.doComponentLayout();
			this.overlay.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.hide();
			this.restMap1.update({src: "images/schipol1.png"});
			this.restMap2.update({src: "images/schipol2.png"});
			this.restMap3.update({src: "images/schipol3.png"});
			this.restMap1.doComponentLayout();
			this.restMap2.doComponentLayout();
			this.restMap3.doComponentLayout();
			this.RestPanel.show();
			this.RestPanel.doComponentLayout();
		}else{
			this.filterButton1.update({src: "images/filter_rest_on.png"});
			this.filterButton1.title = "unclicked";
			this.filterButton1.doComponentLayout();
			this.overlay.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.show();
			this.RestPanel.hide();
			this.BodyPanel.doComponentLayout();
		}
	
		
//		Ext.dispatch({
//			controller: FlyTalk.controllers.ftController,
//			action: 'openRestaurant'
//		});
	},
	
	imageButton1Tap: function () { // clicking on this zooms the image out
		this.imageButton1.update({src: "images/schipol_map.png"});//zoomed out to show three itinerary points
			},
	
    filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	this.overlay.show();
    },
        
	filterButton5Tap: function () { // to open the image overlay 
		if(this.filterButton5.title == "unclicked"){
			this.filterButton5.update({src: "images/filter_outlet_off.png"});
			this.filterButton5.title = "clicked";
			this.filterButton5.doComponentLayout();
			this.overlay.doComponentLayout();
//			this.overlay.hide();
//			this.BodyPanel.hide();
//			this.selectedServicePanel.show();
//			this.selectedServicePanel.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.hide();
			this.restMap1.update({src: "images/filter_map_outlet1.png"});
			this.restMap2.update({src: "images/filter_map_outlet2.png"});
			this.restMap3.update({src: "images/filter_map_outlet3.png"});
			this.restMap1.doComponentLayout();
			this.restMap2.doComponentLayout();
			this.restMap3.doComponentLayout();
			this.RestPanel.show();
			this.RestPanel.doComponentLayout();
		}else{
			this.filterButton5.update({src: "images/filter_outlet_on.png"});
			this.filterButton5.title = "unclicked";
			this.filterButton5.doComponentLayout();
			this.overlay.doComponentLayout();
//			this.overlay.hide();
//			this.BodyPanel.show();
//			this.selectedServicePanel.hide();
//			this.BodyPanel.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.show();
			this.RestPanel.hide();
			this.BodyPanel.doComponentLayout();
		}
	
		
//		Ext.dispatch({
//			controller: FlyTalk.controllers.ftController,
//			action: 'openRestaurant'
//		});
	},
	
	tapImage1: function () { // to open the overlay BurgerKing
	  //  this.overlayImage1.setCentered(true);
		this.overlayImage1.setPosition(1,200);
	    this.overlayImage1.show();
		
	    this.overlayImage1.doComponentLayout();
	},
	    
	tapImage2: function () { // to open the overlay 
	        
	  //  this.overlayImage2.setCentered(true);
	  
	    this.overlayImage2.show();
	    //this.overlayImage1.doComponentLayout();
	},
	        
	tapImage3: function () { // to open the overlay 
	            
	  //  this.overlayImage3.setCentered(true);
	    this.overlayImage3.show();
	    //this.overlayImage1.doComponentLayout();
	},
   
});